import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      count: 0,
    };
  }

  // 点击时将select里面的值相累加
  increment = () => {
    // 获取<option value="1">1</option>里面的value值
    const num = this.select.value * 1;
    // console.log(num);
    const { count } = this.state;
    this.setState({
      count: count + num,
    });
  };

  // 点击时将select里面的值相减
  decrement = () => {
    const num = this.select.value * 1;
    const { count } = this.state;
    this.setState({
      count: count - num,
    });
  };

  //点击时将select里面奇数的值相加
  incrementOfOdd = () => {
    const num = this.select.value * 1;
    const { count } = this.state;

    //奇数时
    if (count % 2 === 1) {
      this.setState({
        count: count + num,
      });
    }
  };

  //点击时将select里面值延迟相加
  incrementDelay = () => {
    const num = this.select.value * 1;
    const { count } = this.state;

    setTimeout(() => {
      this.setState({
        count: count + num,
      });
    }, 1000);
  };

  render() {
    const { count } = this.state;

    return (
      <div>
        <h1>Hello React: {count}</h1>
        {/* 通过ref找到value的值 */}
        <select ref={(select) => (this.select = select)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        {/* 遇到奇数增值 */}
        <button onClick={this.incrementOfOdd}>incrementOfOdd</button>&nbsp;
        <button onClick={this.incrementDelay}>incrementDelay</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
